<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Group Box </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Group Box
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Group Box</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		<div class="row">	
		
		  <div class="col-12">
			  <h3 class="page-header">Deck
			  	<p class="subtitle font-size-14 mb-0">Need a set of equal width and height boxs that aren’t attached to one another? Use box decks.</p>
			  </h3>
		  </div>	
		
		<!--Box deck!-->
		<div class="col-12">
			<div class="box-deck">
			  <div class="box">
				<img class="box-img-top" src="../../../images/gallery/thumb/4.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>This is a longer box with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>

			  <div class="box text-center">
				<img class="box-img-top" src="../../../images/gallery/thumb/5.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>

			  <div class="box text-right">
				<img class="box-img-top" src="../../../images/gallery/thumb/6.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>
			</div>	
		</div>
			
		
		  <div class="col-12">
			  <h3 class="page-header">Columns
			  	<p class="subtitle font-size-14 mb-0">Boxs can be organized into Masonry-like columns with just CSS by wrapping them in <code>.box-columns</code>. Boxs are ordered from top to bottom and left to right when wrapped in <code>.box-columns</code>.</p>
			  </h3>
		  </div>	
		<!--Box columns!-->
		<div class="col-12">
			<div class="box-columns">
			  <div class="box">
				<img class="box-img-top" src="../../../images/gallery/thumb/7.jpg" alt="Box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title that wraps to a new line, but not in the large screens</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				</div>
			  </div>

			  <div class="box box-body">
				<blockquote class="box-bodyquote">
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <footer>
					<small>
					  Someone famous in <cite title="Source Title">Source Title</cite>
					</small>
				  </footer>
				</blockquote>
			  </div>

			  <div class="box">
				<div class="box-body text-center">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
				<img class="box-img" src="../../../images/gallery/thumb/8.jpg" alt="Box image cap">
			  </div>

			  <div class="box box-body box-inverse box-primary text-center">
				<blockquote class="box-bodyquote">
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <footer>
					<small>
					  Someone famous in <cite title="Source Title">Source Title</cite>
					</small>
				  </footer>
				</blockquote>
			  </div>

			  <div class="box">
				<img class="box-img" src="../../../images/gallery/thumb/9.jpg" alt="box image">
			  </div>

			  <div class="box box-body text-right">
				<blockquote class="box-bodyquote">
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <footer>
					<small>
					  Someone famous in <cite title="Source Title">Source Title</cite>
					</small>
				  </footer>
				</blockquote>
			  </div>

			  <div class="box box-body">
				<h4 class="box-title b-0 px-0 pt-0">Box title</h4>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				<p><small class="text-muted">updated</small></p>
			  </div>
			</div>	
		</div>	
		
		  <div class="col-12">
			  <h3 class="page-header">Group
			  	<p class="subtitle font-size-14 mb-0">Use box groups to render boxs as a single, attached element with equal width and height columns.</p>
			  </h3>
		  </div>
		
		<!--Box group!-->
		<div class="col-12">
			<div class="box-group">
			  <div class="box">
				<img class="box-img-top" src="../../../images/gallery/thumb/1.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>

			  <div class="box">
				<img class="box-img-top" src="../../../images/gallery/thumb/2.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>

			  <div class="box">
				<img class="box-img-top" src="../../../images/gallery/thumb/3.jpg" alt="box image cap">
				<div class="box-body">
				  <h4 class="box-title b-0 px-0">Box title</h4>
				  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
				  <p><small>updated</small></p>
				</div>
			  </div>
			</div>	
		</div>
		
		</div>
		

    </section>
    <!-- /.content -->
  </div>
 

</div>


	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
